<template>
  <el-dialog :visible.sync="visible" title="选择模型" append-to-body>
    <div class="aside">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item label="模型名称：">
          <el-input
            v-model="formInline.mxmc"
            v-max-length-tip="30"
            v-no-space
            placeholder="请输入模型名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="模型类型：">
          <el-input
            v-model="formInline.mxlx"
            v-max-length-tip="30"
            v-no-space
            placeholder="请输入模型类型"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
      class="mainTable"
      height="40vh"
      ref="leftMultipleTable"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index" width="55"> </el-table-column>
      <el-table-column show-overflow-tooltip label="模型名称" prop="mxmc">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="算法名称" prop="sfmc">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="AI框架" prop="aikj">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="开发语言" prop="kfyy">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="运行环境" prop="yxhj">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="模型类型" prop="mxlx">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="决策速度" prop="jcsd">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="决策准确率" prop="jczql">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="版本信息" prop="bbxx">
      </el-table-column>
    </el-table>
    <div class="fl_row_start">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageCurrent"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCallback">确定</el-button>
      <el-button @click="cancelJcmxDialog">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getJcmxPage } from '@/views/modelManagement/decisionModel/api/index'
import { CallIntelligentDecision } from '@/api/decisionManage/index.js'
export default {
  props: {
    callback: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [],
      visible: false,
      formInline: {
        mxmc: '',
        mxlx: ''
      },
      pageCurrent: 0,
      pageSize: 10,
      total: 0,
      paramsForm: {},
      multipleSelection: [],
      isAuto: false
    }
  },
  methods: {
    // 自动化-选中
    AutomaticallySelect() {
      // 自动选中第一个
      this.multipleSelection =
        this.tableData.length > 0 ? this.tableData[0] : []
      this.handleCallback(this.isAuto)
    },
    // 关闭弹窗并回调父组件方法
    handleCallback(automatic) {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择模型')
        return
      }
      // 决策模型的id
      let jcmxId

      // 点击自动化时，存储决策模型选择的条目
      if (this.isAuto == true) {
        // 存储决策模型选择的条目
        localStorage.setItem('jcmx', JSON.stringify(this.multipleSelection))
        // 取出值
        jcmxId = JSON.parse(localStorage.getItem('jcmx'))[0].mxID
      } else {
        // 不是自动化，就是手动点击
        jcmxId = this.multipleSelection[0].mxID
      }

      const params = {
        mxID: jcmxId, // 决策模型id
        znjcJsonStr: JSON.stringify(this.paramsForm).replace(/\"/g, "'") // python 算法接口需要，转为字符串
      }
      CallIntelligentDecision(params).then(response => {
        if (response.data.code !== 200) {
          this.$message.error(response.data.message)
          return
        }
        const parseData = JSON.parse(response.data.message)
        this.$emit(
          'callback',
          this.multipleSelection,
          parseData,
          this.isAuto == true ? true : false
        )
        this.cancelJcmxDialog()
        if (this.isAuto == true) {
          // 打开选择任务规划模型弹窗
          this.$bus.$emit('openFooterModal', true)
        }
      })
    },

    // 关闭弹窗
    cancelJcmxDialog() {
      this.$refs.leftMultipleTable.clearSelection()
      this.visible = false
    },

    // 获取表格数据
    getJcmxPageData(data, bool = false) {
      const query = {
        ...data,
        pageCurrent: this.pageCurrent,
        pageSize: this.pageSize
      }
      getJcmxPage(query).then(res => {
        if (res.data.code === 200) {
          const data = res.data
          this.tableData = data.data.records
          this.total = data.data.total
          // if (bool) {
          // this.isAuto = bool
          // 这里就不调用自动选择了，因为这里也需要手动选择
          // this.AutomaticallySelect()
          // }
        }
      })
    },

    // 打开弹窗
    openModal(value, bool) {
      this.visible = true
      this.isAuto = bool // 通过此判断是否决定保存
      this.paramsForm = value
      this.getJcmxPageData(this.formInline, bool)
    },
    autoModalAction(bool) {
      this.getJcmxPageData(this.formInline, bool)
    },
    // 重置模型列表
    onReset() {
      this.pageCurrent = 1
      this.formInline = {}
      this.getJcmxPageData(this.formInline)
    },

    // 获取模型列表
    onSubmit() {
      this.pageCurrent = 1
      this.getJcmxPageData(this.formInline)
    },

    // 勾选回调方法
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (val.length > 1) {
        val.forEach(key => {
          if (key !== val[val.length - 1]) {
            this.$refs.leftMultipleTable.toggleRowSelection(key, false)
          }
        })

        this.$refs.leftMultipleTable.clearSelection()
        this.$refs.leftMultipleTable.toggleRowSelection(
          val[val.length - 1],
          true
        )
      }
    },

    // 分页回调方法
    handleSizeChange(val) {
      this.pageSize = val
      this.getJcmxPageData(this.formInline)
    },

    // 页码回调方法
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.getJcmxPageData(this.formInline)
    }
  }
}
</script>

<style scoped>
::v-deep .el-table .el-table__header-wrapper .el-table__header th .el-checkbox {
  display: none;
}
</style>
